<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Grocery - Manage - 登录</title>

    <link rel="shortcut icon" href="${ctxPath}/static/grocery.ico">
    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>

    <!--<style type="text/css">&lt;!&ndash;轮播样式&ndash;&gt;-->
        <!--body,div,ul,li,a,img{margin: 0;padding: 0;}-->
        <!--ul,li{list-style: none;}-->
        <!--a{text-decoration: none;}-->
        <!--#wrapper{position: relative;margin: 30px auto;width: 100%;height: 100%;z-index:0}-->
        <!--#banner{position:relative;width: 100%;height: 100%;overflow: hidden;}-->
        <!--.imgList{position:relative;width: 100%;height: 100%;z-index: 10;overflow: hidden;}-->
        <!--.imgList li{float:left;display: inline;}-->
        <!--#prev,-->
        <!--#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}-->
        <!--#prev{left: 10px;}-->
        <!--#next{right: 10px;}-->
        <!--#prev:hover,-->
        <!--#next:hover{opacity: 0.5;filter:alpha(opacity=50);}-->
        <!--.bg{position: absolute;bottom: 0;width: 100%;height: 100%;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}-->
        <!--.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}-->
        <!--.infoList li{display: none;}-->
        <!--.infoList .infoOn{display: inline;color: white;}-->
        <!--.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}-->
        <!--.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}-->
        <!--.indexList .indexOn{background: red;font-weight: bold;color: white;}-->
    <!--</style>-->

</head>

<body class="gray-bg" style="background:url('../../static/img/login-background.jpg');background-size:100%;height:100%;">
<!--<div id="wrapper">&lt;!&ndash; 最外层部分 &ndash;&gt;-->
    <!--<div id="banner">&lt;!&ndash; 轮播部分 &ndash;&gt;-->
        <!--<ul class="imgList">&lt;!&ndash; 图片部分 &ndash;&gt;-->
            <!--<li><a href="#"><img src="../../static/img/login-background.jpg" width="100%" height="100%" alt="puss in boots1"></a></li>-->
            <!--<li><a href="#"><img src="../../static/img/p_big1.jpg" width="100%" height="100%" alt="puss in boots2"></a></li>-->
            <!--<li><a href="#"><img src="../../static/img/p_big2.jpg" width="100%" height="100%" alt="puss in boots3"></a></li>-->
            <!--<li><a href="#"><img src="../../static/img/p_big3.jpg" width="100%" height="100%" alt="puss in boots4"></a></li>-->
        <!--</ul>-->
        <!--<img src="../../static/img/a9.jpg" width="20px" height="40px" id="prev">-->
        <!--<img src="../../static/img/a4.jpg" width="20px" height="40px" id="next">-->
        <!--<div class="bg"></div> &lt;!&ndash; 图片底部背景层部分&ndash;&gt;-->
        <!--<ul class="infoList">&lt;!&ndash; 图片左下角文字信息部分 &ndash;&gt;-->
            <!--<li class="infoOn">puss in boots1</li>-->
            <!--<li>puss in boots2</li>-->
            <!--<li>puss in boots3</li>-->
            <!--<li>puss in boots4</li>-->
        <!--</ul>-->
        <!--<ul class="indexList">&lt;!&ndash; 图片右下角序号部分 &ndash;&gt;-->
            <!--<li class="indexOn">1</li>-->
            <!--<li>2</li>-->
            <!--<li>3</li>-->
            <!--<li>4</li>-->
        <!--</ul>-->




        <div class="middle-box text-center loginscreen  animated fadeInDown">
            <div style="padding: 100px 0px;">
                <div>
                    <h1 class="logo-name">Zxl</h1>
                </div>
                <h3>欢迎使用 Grocery</h3>
                <br/>
                <h4 style="color: red;">${tips!}</h4>
                <form class="m-t" role="form" action="${ctxPath}/login" method="post">
                    <div class="form-group">
                        <input type="text" name="username" class="form-control" placeholder="用户名" required="">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control" placeholder="密码" required="">
                    </div>
                    @if(tool.getKaptchaOnOff() == true){
                    <div class="form-group" style="float: left;">
                        <div class="col-sm-8" style="padding-left: 0px; padding-right: 0px;">
                            <input class="form-control" type="text" name="kaptcha" placeholder="验证码" required="">
                        </div>
                        <div class="col-sm-4" style="padding-left: 0px; padding-right: 0px;">
                            <img src="${ctxPath}/kaptcha" id="kaptcha" width="100%" height="100%"/>
                        </div>
                    </div>
                    @}
                    <div class="checkbox" style="text-align: left">
                        <label>
                            <input type="checkbox" name="remember" style="margin-top: 2px;">记住我
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
                    </p>
                </form>
            </div>
        </div>

    <!--</div>-->
<!--</div>-->

<script>
    $(function () {
        $("#kaptcha").on('click', function () {
            $("#kaptcha").attr('src', '${ctxPath}/kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
        });
    });

    !function() { //   添加光线粒子效应 粒子与线条自动游离连接，当粒子运动碰撞到边缘时处理，被弹回相反方向
        function A(a, b, c) {
            return a.getAttribute(b) || c
        }
        function F(a) {
            return document.getElementsByTagName(a);
        }
        function D() {
            var c = F("script"),
                a = c.length,
                b = c[a - 1];
            return {
                l: a,
                z: A(b, "zIndex", -1),
                o: A(b, "opacity", 0.5),
                c: A(b, "color", "0,0,0"),
                n: A(b, "count", 199)
            }
        }
        function E() {
            x = i.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            B = i.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        function M() {
            J.clearRect(0, 0, x, B);
            var c = [I].concat(v);
            var b, d, a, g, e, f;
            v.forEach(function(h) {
                h.x += h.xa,
                    h.y += h.ya,
                    h.xa *= h.x > x || h.x < 0 ? -1 : 1,
                    h.ya *= h.y > B || h.y < 0 ? -1 : 1,
                    J.fillRect(h.x - 0.5, h.y - 0.5, 1, 1);
                for (d = 0; d < c.length; d++) {
                    b = c[d];
                    if (h !== b && null !== b.x && null !== b.y) {
                        g = h.x - b.x;
                        e = h.y - b.y;
                        f = g * g + e * e;
                        f < b.max && (b === I && f >= b.max / 2 && (h.x -= 0.03 * g, h.y -= 0.03 * e), a = (b.max - f) / b.max, J.beginPath(), J.lineWidth = a / 2, J.strokeStyle = "rgba(" + w.c + "," + (a + 0.2) + ")", J.moveTo(h.x, h.y), J.lineTo(b.x, b.y), J.stroke())
                    }
                }
                c.splice(c.indexOf(h), 1);
            }),
                C(M);
        }
        var i = document.createElement("canvas"),
            w = D(),
            L = "c_n" + w.l, //c_n2
            J = i.getContext("2d"),
            x,
            B,
            C = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
                function(a) {
                    window.setTimeout(a, 1000 / 45)
                },
            N = Math.random,
            I = {
                x: null,
                y: null,
                max: 20000
            };
        i.id = L;
        i.style.cssText = "position:fixed;top:0;left:0;z-index:" + w.z + ";opacity:" + w.o;
        F("body")[0].appendChild(i);
        E();
        window.onresize = E;
        window.onmousemove = function(a) {
            a = a || window.event,
                I.x = a.clientX,
                I.y = a.clientY
        };
        window.onmouseout = function() {
            I.x = null,
                I.y = null
        };
        for (var v = [], z = 0; w.n > z; z++) {
            var G = N() * x,
                H = N() * B,
                y = 2 * N() - 1,
                K = 2 * N() - 1;
            v.push({
                x: G,
                y: H,
                xa: y,
                ya: K,
                max: 6000
            });
        }
        setTimeout(function() {
            M()
        }, 100)
    } ();

//    轮播图
//    var curIndex = 0, //当前index
//        imgLen = $(".imgList li").length; //图片总数
//    // 定时器自动变换2.5秒每次
//    var autoChange = setInterval(function(){
//        if(curIndex < imgLen-1){
//            curIndex ++;
//        }else{
//            curIndex = 0;
//        }
//        //调用变换处理函数
//        changeTo(curIndex);
//    },2500);
//    //左箭头滑入滑出事件处理
//    $("#prev").hover(function(){
//        //滑入清除定时器
//        clearInterval(autoChange);
//    },function(){
//        //滑出则重置定时器
//        autoChangeAgain();
//    });
//    //左箭头点击处理
//    $("#prev").click(function(){
//        //根据curIndex进行上一个图片处理
//        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
//        changeTo(curIndex);
//    });
//    //右箭头滑入滑出事件处理
//    $("#next").hover(function(){
//        //滑入清除定时器
//        clearInterval(autoChange);
//    },function(){
//        //滑出则重置定时器
//        autoChangeAgain();
//    });
//    //右箭头点击处理
//    $("#next").click(function(){
//        curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
//        changeTo(curIndex);
//    });
//    //对右下角按钮index进行事件绑定处理等
//    $(".indexList").find("li").each(function(item){
//        $(this).hover(function(){
//            clearInterval(autoChange);
//            changeTo(item);
//            curIndex = item;
//        },function(){
//            autoChangeAgain();
//        });
//    });
//    //清除定时器时候的重置定时器--封装
//    function autoChangeAgain(){
//        autoChange = setInterval(function(){
//            if(curIndex < imgLen-1){
//                curIndex ++;
//            }else{
//                curIndex = 0;
//            }
//            //调用变换处理函数
//            changeTo(curIndex);
//        },2500);
//    }
//    function changeTo(num){
//        var goLeft = num * 400;
//        $(".imgList").animate({left: "-" + goLeft + "px"},500);
//        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
//        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
//    }
</script>

</body>

</html>
